import React, { Component } from 'react'
import { updateType } from '@/store/moudles/dict/action'
import { updateSystem, updateTokenAsync } from '@/store/moudles/global/action'
import { connect } from 'react-redux'
import { Button } from 'antd'
import PropTypes from 'prop-types'

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'Home'
    }
  }

  addTypes = () => {
    this.props.updateType({ id3: '类别3' })
  }

  updateSystem = () => {
    this.props.updateSystem('系统名称2')
  }

  updateToken = () => {
    this.props.updateTokenAsync()
  }

  render() {
    return (
      <div>
        {this.state.name} | {this.props.systemName} |
        <Button type="primary" onClick={this.addTypes}>
          addTypes
        </Button>
        <Button type="primary" onClick={this.updateSystem}>
          updateSystem
        </Button>
        <Button type="primary" onClick={this.updateToken}>
          updateToken
        </Button>
      </div>
    )
  }
}
Home.propTypes = {
  systemName: PropTypes.string.isRequired,
  updateType: PropTypes.func.isRequired,
  updateSystem: PropTypes.func.isRequired,
  updateTokenAsync: PropTypes.func.isRequired
}
const mapStateToProps = (state) => {
  return {
    types: state.dict.types,
    systemName: state.global.systemName
  }
}

const mapDispatchToProps = { updateType, updateSystem, updateTokenAsync }
// 完整写法
// function mapDispatchToProps(dispatch) {
//   return {
//     updateType: (data) => dispatch(updateType(data)),
//     updateSystem: (data) => dispatch(updateSystem(data)),
//     updateTokenAsync: () => dispatch(updateTokenAsync())
//   }
// }
const Connect = connect(mapStateToProps, mapDispatchToProps)(Home)

export default Connect
